<%--
  Created by IntelliJ IDEA.
  User: 24044
  Date: 2021/9/14
  Time: 13:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入外部标签库--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    //获取当前项目路径(/项目工程名)
    pageContext.setAttribute("path",request.getContextPath());
    //获取当前项目完整路径(http://localhost:8080/项目工程名)
    String app_path=request.getScheme()
                    +"://"
                    +request.getServerName()
                    +":"
                    +request.getServerPort()
                    +request.getContextPath();
%>
<html>
<head>
    <title>员工列表</title>
<%--
    （1）不以"/"开头：找资源，经常容易出问;
                    <情况一：> 若只在开发前端静态页面的项目中，默认以当前资源的路径为基准，路径前面可以加"./"，也可以不加（结果不影响）；
                    <情况二：> 若是在动态web项目中，无论jsp，html页面在webapp下面的哪个子目录里面，默认路径都以webapp文件夹下面为基准
                    注意： "./" : 表示当前目录
                          "../" : 表示当前目录的上一级目录，可以多层嵌套使用
    （2）以"/"开头：找资源;
                    <1> 在动态web项目中：以服务器的路径为标准(http://localhost:8080)，使用时需要后面加上 "/项目工程名+/资源路径"；
                            注意："/+项目工程名" : 会自动映射到动态web项目的"webapp"目录下面，而不是项目当前目录下面
                    <2> 在静态页面开发项目中，不能直接使用 "/"。
    （3）设置一个全局变量path(域对象也OK),给path赋值为当前项目路径或者完整路径
--%>
    <%--    引入jQuery--%>
        <script type="text/javascript" src="${path}/static/js/jquery-1.9.1.js"></script>
    <%--    引入bootstrap框架样式--%>
        <link rel="stylesheet" href="${path}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
        <script src="${path}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>

    <%--搭建显示页面--%>
    <div class="container">
        <%--标题--%>
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <%--按钮--%>
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary">新增</button>
                <button class="btn btn-danger">删除</button>
            </div>
        </div>
        <%--显示表格数据--%>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover">
                    <tr>
                        <th>id</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                    <c:forEach items="${pageInfo.list}" var="emp">
                        <tr>
                            <th>${emp.empId}</th>
                            <th>${emp.empName}</th>
                            <th>${emp.gender=="M"?"男":"女"}</th>
                            <th>${emp.email}</th>
                            <th>${emp.department.deptName}</th>
                            <th>
                                <button class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Star
                                    编辑
                                </button>
                                <button class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Star
                                    删除
                                </button>
                            </th>
                        </tr>
                    </c:forEach>

                </table>
            </div>
        </div>
        <%--显示导航栏，分页信息--%>
        <div class="row">
            <%--分页文字信息--%>
            <div class="col-md-6">
                当前第${pageInfo.pageNum}页，总共${pageInfo.pages}页，总${pageInfo.total}记录
            </div>
            <%--导航页面信息--%>
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li><a href="${path}/emps?pn=1">首页</a></li>
<%--                        如果存在上一页，才会显示上一页提示--%>
                        <c:if test="${pageInfo.hasPreviousPage}">
                            <li>
                                <a href="${path}/emps?pn=${pageInfo.prePage}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        </c:if>

                        <c:forEach items="${pageInfo.navigatepageNums}" var="pageNum">
                            <%--如果页数等于当前页面数，则进行颜色激活，不等于则正常显示--%>
                            <c:if test="${pageNum == pageInfo.pageNum}">
                                <li class="active"><a href="${path}/emps?pn=${pageNum}">${pageNum}</a></li>
                            </c:if>
                            <c:if test="${pageNum != pageInfo.pageNum}">
                                <li><a href="${path}/emps?pn=${pageNum}">${pageNum}</a></li>
                            </c:if>
                        </c:forEach>
                        <c:if test="${pageInfo.hasNextPage}">
                            <li>
                                <a href="${path}/emps?pn=${pageInfo.nextPage}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </c:if>

                        <li><a href="${path}/emps?pn=${pageInfo.pages}">末页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</body>
</html>
